<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/inf.css">
	<style>


    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }

    </style>
    <link rel="stylesheet" href=" dist/dropload.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		
	});
	</script>
</head>
<body>
	<section class="inf-list">
	 	<div>
	 		<ul class="mylist">
	 			<c:forEach items="${list }" var="info">
	 				<li>
	 				<c:if test="${info.isremind == 1 }">
	 					<em></em>
	 				</c:if>
		 				<div>${info.smscontent }</div>
		 				<p><fmt:formatDate value="${info.sendtime }" pattern="MM-dd HH:mm" /></p>
		 			</li>
	 			</c:forEach>
	 		</ul>
	 	</div>
	 </section>

	<script src="dist/dropload.min.js"></script>
	<script>
	$(function(){
		// 页数
	    var page = 1;
	    // 每页展示10个
	    var size = 10;
	    
	    // dropload
	    $('.inf-list').dropload({
	        scrollArea : window,
	        domUp : {
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
	            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
	        },
	        domDown : {
	            domClass   : 'dropload-down',
	            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
	            domNoData  : '<div class="dropload-noData">没有更多信息了</div>'
	        },
	        loadUpFn : function(me){
	            $.ajax({
	                type: 'GET',
	                url: 'seller/smsListJson?page=1&rows='+size+'&sellerId='+localStorage.sellerId,
	                dataType: 'json',
	                success: function(data){
	                    var result = '';
	                    for(var i = 0; i < data.lists.length; i++){
	                    	result += '<li>';
	                    	if(data.lists[i].isremind == 1){
	                    		result += '<em></em>';
	                    	}
	                    	result += '<div>'+data.lists[i].smscontent+'</div>';
	                    	result += '<p>'+data.lists[i].sendTime+'</p>';
	                    	result += '</li>';
	                    	result += '</li>';
	                    }
	                    //console.log('aaa',result);
	                    // 为了测试，延迟1秒加载
	                    setTimeout(function(){
	                        $('.mylist').html(result);
	                        // 每次数据加载完，必须重置
	                        me.resetload();
	                        // 重置页数，重新获取loadDownFn的数据
	                        page = 1;
	                        // 解锁loadDownFn里锁定的情况
	                        me.unlock();
	                        me.noData(false);
	                    },1000);
	                } ,
	                error: function(xhr, type){
	                    alert(JSON.stringify(xhr));
	                    // 即使加载出错，也得重置
	                    me.resetload();
	                }
	            });
	        },
	        loadDownFn : function(me){
	        	page++;
	            // 拼接HTML
	            var result = '';
	            $.ajax({
	                type: 'GET',
	                url: 'seller/smsListJson?page='+page+'&rows='+size+'&sellerId='+localStorage.sellerId,
	                dataType: 'json',
	                success: function(data){
	                    var arrLen = data.lists.length;
	                    if(arrLen > 0){
	                    	for(var i = 0; i < data.lists.length; i++){
	                    		result += '<li>';
	                    		if(data.lists[i].isremind == 1){
		                    		result += '<em></em>';
		                    	}
		                    	result += '<div>'+data.lists[i].smscontent+'</div>';
		                    	result += '<p>'+data.lists[i].sendTime+'</p>';
		                    	result += '</li>';
		                    	result += '</li>';
		                    }
	                    // 如果没有数据
	                    }else{
	                        // 锁定
	                        me.lock();
	                        // 无数据
	                        me.noData();
	                    }
	                    // 为了测试，延迟1秒加载
	                    setTimeout(function(){
	                        // 插入数据到页面，放到最后面
	                        $('.mylist').append(result);
	                        // 每次数据插入，必须重置
	                        me.resetload();
	                    },1000);
	                },
	                error: function(xhr, type){
	                    //alert('Ajax error!');
	                    // 即使加载出错，也得重置
	                    me.resetload();
	                }
	            });
	        },
	        threshold : 50
	    });
	
	});
	</script>
</body>
</html>
